.blue-border {
  border: 1px solid;
  border-image: linear-gradient(180deg,
      rgba(0, 111, 255, 0.6),
      rgba(0, 111, 255, 0)) 2 2;
  background: linear-gradient(to left, #006fff, #006fff) left top no-repeat,
    linear-gradient(to bottom, #006fff, #006fff) left top no-repeat,
    linear-gradient(to left, #006fff, #006fff) right top no-repeat,
    linear-gradient(to bottom, #006fff, #006fff) right top no-repeat,
    rgba(255, 255, 255, 0.4);
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}

.green-border {
  border: 1px solid;
  border-image: linear-gradient(180deg,
      rgba(49, 192, 114, 0.6),
      rgba(49, 192, 114, 0)) 1 1;

  flex-shrink: 0;
  background: linear-gradient(to left, #31c072, #31c072) left top no-repeat,
    linear-gradient(to bottom, #31c072, #31c072) left top no-repeat,
    linear-gradient(to left, #31c072, #31c072) right top no-repeat,
    linear-gradient(to bottom, #31c072, #31c072) right top no-repeat,
    rgba(255, 255, 255, 0.4);
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}

.orange-border {
  border: 1px solid;
  border-image: linear-gradient(180deg,
      rgba(255, 128, 0, 0.6),
      rgba(255, 128, 0, 0)) 1 1;
  background: linear-gradient(to left, #ff8000, #ff8000) left top no-repeat,
    linear-gradient(to bottom, #ff8000, #ff8000) left top no-repeat,
    linear-gradient(to left, #ff8000, #ff8000) right top no-repeat,
    linear-gradient(to bottom, #ff8000, #ff8000) right top no-repeat,
    rgba(255, 255, 255, 0.4);
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}

